<!--人脉页面-->
<template>
    <div class="body-bac-container">
        <div class="user-list-container container">
            <!--左边-->
            <el-row>
                <!--右边-->
                <el-col :span="7" class="col-left " :class="isFixeds? 'left-fixed':''">
                    <!--导航--->
                    <div class="left-container bac-container">
                        <el-menu :default-active="defaultActive"  :router="true">
                            <el-menu-item index="user-search-list">
                                <i class="el-icon-third-add-account"></i>
                                <span slot="title">添加关注</span>
                            </el-menu-item>
                            <el-menu-item index="my-friend-list">
                                <i class="el-icon-third-favorites"></i>
                                <span slot="title">我的关注</span>
                            </el-menu-item>
                            <el-menu-item index="my-fans-list">
                                <i class="el-icon-third-Customermanagement"></i>
                                <span slot="title">我的粉丝</span>
                            </el-menu-item>
                            <el-menu-item index="recommend-user-list">
                                <i class="el-icon-third-brand"></i>
                                <span slot="title">推荐</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                    <div class="left-container bac-container-none-padding" :loading="loading"
                         v-if="recommendUserList.length > 0">
                        <div class="bac-container-title-border">推荐人脉
                            <el-link :underline="false" @click="$router.push({name:'recommend-user-list'})">全部 <i class="el-icon-arrow-right"></i></el-link>
                        </div>
                        <ul class="user-list-mini">
                            <li v-for="(user,index) in recommendUserList" :key="index" class="user-item">
                                <el-row>
                                    <el-col :span="4" class="user-avatar">
                                        <div @click="openHome(user.userId)">
                                            <el-avatar :size="40" :src="user.headUrl"></el-avatar>
                                        </div>
                                    </el-col>
                                    <el-col :span="16" class="user-data">
                                        <div class="user-name" @click="openHome(user.userId)">
                                            <span>{{user.realName}}</span> &nbsp;
                                            <!--<el-tag type="danger" size="mini" effect="plain" v-if="user.type == 1">v-->
                                            <!--</el-tag>-->
                                            <!--<el-tag type="danger" size="mini" effect="plain"-->
                                                    <!--v-if="user.creditLevel == 1">实名-->
                                            <!--</el-tag>-->
                                        </div>
                                        <div class="user-data-item">
                                            <span>简介：</span>
                                            {{user.synopsis}}
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="user-operate">
                                            <el-button size="mini" @click="userConcernAdd(user)"
                                                       :loading="user.addLoading" v-if="user.concernUserId == null"><i
                                                    class="el-icon-plus"></i>关注
                                            </el-button>
                                            <el-button size="mini" plain v-else>{{user.isEachOther ? '已互关' : '已关注'}}
                                            </el-button>
                                        </div>
                                    </el-col>
                                </el-row>
                            </li>

                        </ul>
                    </div>
                </el-col>
                <el-col :span="17" class="col-right">
                    <router-view></router-view>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import util from '@/utils/commonUtil';

    export default {
        data: function () {
            return {
                defaultActive:'user-search-list',
                isFixeds: false,
                recommendUserList: []
            }
        },
        methods: {
            handleScroll() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                if (scrollTop > 300) {//提前判断要上升多少像素就固定
                    this.isFixeds = true;
                } else {
                    this.isFixeds = false;
                }
            },
            initData() {
                this.loading = true;
                this.$post("/user/concern/queryRecommendUserPage", {
                    page: 1,
                    size: 15
                }).then(res => {
                    if (res.data.rows == null || res.data.rows.length == 0) {
                        this.loading = false;
                        return;
                    }
                    res.data.rows.forEach(u => {
                        u.headUrl =util.setDefaultHead(u.headUrl) ;
                        u.addLoading = false;
                    })
                    this.recommendUserList = res.data.rows;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },
            userConcernAdd(user) {
                user.addLoading = true;
                this.$post("/user/concern/add", {
                    concernUserId: user.userId
                }).then(res => {
                    user.concernUserId = res.data.concernUserId
                    user.isEachOther = res.isEachOther;
                    user.addLoading = false;
                }).catch(() => {
                    user.addLoading = false;
                })
            },
            openHome(id) {
                this.$router.push({
                    path: "/home",
                    query: {
                        id: id
                    }
                })
            }
        },
        updated(){
            this.defaultActive = this.$route.name;
        },
        mounted() {
            window.addEventListener('scroll', this.handleScroll);
            this.initData();
        }
    }
</script>

<style>


    .user-list-container .left-container .el-menu {
        border: none;
    }

    .user-list-container .left-container .el-menu .el-menu-item {
        font-size: 15px;
    }

    .user-list-container .left-container .el-menu-item [class^=el-icon-] {
        font-size: 26px;

    }

    .user-list-container .batch-container .el-button--mini {
        padding: 3px 5px
    }

    /**
    头部
    **/
    .user-list-container .top-breadcrumb {
        padding: 10px 0 0 10px;
        height: 20px;
        vertical-align: middle;
    }

    .user-list-container .col-right-top {
        height: 42px;
        color: #333;
        border-bottom: 1px solid #EBEEF5;
    }


    .user-list-container .top-title {
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        padding: 0 15px;
        line-height: 40px;
        border-bottom: 2px solid #007cdc;
    }

    .user-list-container .filter-min-box {
        height: 28px;
        vertical-align: middle;
        padding: 5px;
        margin: 3px 10px 0;
        display: flex;
        float: right;
    }

    .user-list-container .filter-min-box .left {
        line-height: 28px;
        margin-right: 10px;
    }

    .user-list-container .filter-min-box .name-input {
        width: 200px;
    }

    .user-list-container .filter-min-box .el-link--inner {
        font-size: 13px;
    }


    /**
 推荐列表
  */
    .user-list-mini {
        padding: 0px 10px;
        margin: 0;
    }

    .user-list-mini .user-item {
        padding: 5px 0px;
        margin: 5px 0px;
        position: relative;
    }

    .user-list-mini .user-name {
        line-height: 28px;
        font-size: 15px;
        font-weight: 700;
        color: #303133;
    }

    .user-list-mini .user-data {
        padding-left: 10px;
        font-size: 12px;
        line-height: 12px;
        color: #606266;
    }

    .user-list-mini .user-data-item {
        display: block;
        width: 100%;
        overflow: hidden;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
    }

    .user-list-mini .user-operate {
        position: absolute;
        right: 0;
        top: 10px;
    }

    .user-list-mini .el-button--mini {
        padding: 3px 5px
    }


    /**
    卡片列表
     */

    .user-list-container .user-list-small {
        overflow: hidden;
        margin: 10px 10px;
    }

    /**
   列表
    */
    .user-list-container .user-list-small .user-item {
        width: 49%;
        margin: 0px 0.5% 10px;
        height: 145px;
        float: left;
    }

    .user-list-container .user-list-small .user-item .el-card {
        height: 100%;
    }

    .user-list-container .user-list-small .user-item:first-child {
        border: none;
    }

    .user-list-container .user-list-small .user-name {
        line-height: 30px;
        font-size: 15px;
        font-weight: 700;
        color: #303133;
    }

    .user-list-container .user-list-small .user-data {
        font-size: 12px;
        margin-left: 10px;
        line-height: 22px;
        color: #606266;
    }

    .user-list-container .user-list-small .user-data-item {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    .user-list-container .user-list-small .user-data-item li {
        float: left;
        margin-right: 10px;

    }

    .user-list-container .user-list-small .user-data-item li div {
        display: inline-block;
    }

    .user-list-container .user-list-small .user-data-item li a {
        font-size: 12px;
        display: inline-block;
    }


    .user-list-container .user-list-small .user-operate {
        margin-top: 5px;
    }

    .user-list-container .el-dropdown {
        margin-right: 10px;
    }

    .user-list-container .el-card {
        background-color: #f9f9f9;
    }

    .user-list-container .el-card__body {
        padding: 10px 20px;
    }

    .user-list-container .batch-checkbox {
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .user-list-container .batch-checkbox .el-checkbox__inner, .user-list-container .batch-checkbox .el-checkbox__original {
        zoom: 130%;
    }

    .user-list-container .batch-checkbox .el-checkbox__label {
        display: none;
    }

    /**

     */
    /**
       默认列表
        */
    .user-list-container .user-list .user-item {
        padding: 10px 15px 10px;
        margin: 10px 10px 10px;
        border-top: 1px solid #EBEEF5;
    }

    .user-list-container .user-list .user-item:first-child {
        border: none;
    }

    .user-list-container .user-list .user-name {
        line-height: 30px;
        font-size: 15px;
        font-weight: 700;
        color: #303133;
        cursor: pointer;
    }

    .user-list-container .user-list .user-data {
        font-size: 12px;
        margin-left: 10px;
        line-height: 20px;
        color: #606266;
    }

    .user-list-container .user-list .user-data-item {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    .user-list-container .user-list .user-data-item li {
        float: left;
        margin-right: 10px;

    }

    .user-list-container .user-list .user-data-item li div {
        display: inline-block;
    }

    .user-list-container .user-list .user-data-item li a {
        display: inline-block;
        font-size: 12px;
    }

    .user-list-container .user-list .user-operate {
        position: absolute;
        right: 0;
        top: 5px;
    }

    .user-list-container .user-list .el-divider--horizontal {
        margin: 10px 0;
    }

    .user-list-container .user-list-mini .user-operate {
        position: absolute;
        right: 0;
        top: 10px;
    }

    .user-tag {
        font-size: 13px;
        padding-right: 10px;
    }

    .user-synopsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

</style>
